<template>
  <div class="home">
    <BannerBox :banners="banners" />
    <section>
      <HomeTitle>推荐歌单</HomeTitle>

      <ul>
        <div class="scoll-container clearFix">
          <PlayListCard
            v-for="item in personalized"
            :key="item.id"
            :item="item"
            @click.native="handClick(item.id)"
          />
        </div>
      </ul>

      <HomeTitle>最新音乐</HomeTitle>
      <SongListItem v-for="item in newSongs" :key="item.id" :item="item" />
    </section>
  </div>
</template>

<script>
import BannerBox from "@/components/basics/BannerBox.vue";
import HomeTitle from "@/components/slot/HomeTitle.vue";
import PlayListCard from "@/components/basics/PlayListCard.vue";
import SongListItem from "@/components/basics/SongListItem.vue";
// @ is an alias to /src

export default {
  components: {
    BannerBox,
    HomeTitle,
    PlayListCard,
    SongListItem,
  },
  data() {
    return {
      banners: [],
      personalized: [],
      newSongs: [],
    };
  },
  created() {
    // 看我骚操作
    const { getBanner, getPersonalizeds, getNewSongs } = this;
    Promise.all([getBanner(), getPersonalizeds(), getNewSongs()]);
  },

  methods: {
    // 点击进入歌单详情
    handClick(id) {
      this.$router.push({ path: "/playlist", query: { id } });
    },

    // 顶部轮播图
    getBanner() {
      this.axios.get("/banner").then((res) => {
        this.banners = res.data.banners;
      });
    },

    // 推荐歌单
    getPersonalizeds() {
      this.axios.get("/personalized?limit=6").then((res) => {
        this.personalized = res.data.result;
      });
    },

    // 推荐新音乐
    getNewSongs() {
      this.axios.get("/personalized/newsong").then((res) => {
        this.newSongs = res.data.result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;

  section {
    width: 95%;
    margin: 0 auto;

    ul {
      width: 100%;
      overflow: scroll;

      .scoll-container {
        width: 250%;
      }
    }
  }
}
</style>
